<template>
  <div class="demoWrap">
    <el-row :gutter="15">
      <el-col :span="8">
        <div class="demo">
          <h2>普通调用示例</h2>
          <el-button :loading="normalLoading" @click="handleNormal">
            调用
          </el-button>
          <p>耗时：{{ normalWaste }}</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="demo">
          <h2>Worker调用示例</h2>
          <el-button :loading="workerLoading" @click="handleWorker">
            调用
          </el-button>
          <p>耗时：{{ workerWaste }}</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="demo">
          <h2>WASM调用示例</h2>
          <el-button :loading="wasmLoading" @click="handleWASM">
            调用
          </el-button>
          <p>耗时：{{ wasmWaste }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { fib } from '@apps/wasm'
import { defineComponent, reactive, toRefs } from 'vue'
import workerpool from 'workerpool'

export default defineComponent({
  name: 'App',
  setup() {
    const state = reactive({
      normalWaste: '--',
      normalLoading: false,
      workerWaste: '--',
      workerLoading: false,
      wasmWaste: '--',
      wasmLoading: false
    })

    function fibonacci(n: number) {
      if (n < 0) throw new Error('输入的数字不能小于0')
      if (n == 1 || n == 2) {
        return 1
      } else {
        return fibonacci(n - 1) + fibonacci(n - 2)
      }
    }

    function fmtTime(startTime: number, endTime: number) {
      return (endTime - startTime).toFixed(2) + '毫秒'
    }

    function handleNormal() {
      state.normalLoading = true
      const startTime = performance.now()

      const res1 = fibonacci(38)
      const res2 = fibonacci(38)
      const res3 = fibonacci(38)
      console.log('normal res', [res1, res2, res3])

      state.normalLoading = false
      const endTime = performance.now()

      state.normalWaste = fmtTime(startTime, endTime)
    }

    function handleWorker() {
      state.workerLoading = true
      const startTime = performance.now()
      const pool = workerpool.pool()

      Promise.all([
        pool.exec(fibonacci, [38]),
        pool.exec(fibonacci, [38]),
        pool.exec(fibonacci, [38])
      ])
        .then(res => {
          console.log('worker res', res)

          state.workerLoading = false
          const endTime = performance.now()
          state.workerWaste = fmtTime(startTime, endTime)
        })
        .catch(error => {
          console.error(error)
        })
        .then(() => {
          pool.terminate()
        })
    }

    function handleWASM() {
      state.wasmLoading = true
      const startTime = performance.now()

      const res1 = fib(38)
      const res2 = fib(38)
      const res3 = fib(38)
      console.log('wasm res', [res1, res2, res3])

      state.wasmLoading = false
      const endTime = performance.now()

      state.wasmWaste = fmtTime(startTime, endTime)
    }

    return {
      ...toRefs(state),
      handleNormal,
      handleWorker,
      handleWASM
    }
  }
})
</script>

<style>
.demoWrap {
  margin: 15px;
}

.demo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  padding: 15px 0;
  border: 1px solid var(--el-border-color);
}

.demo .el-button {
  margin: 15px auto;
}
</style>
